<script lang="ts" setup>
import { getMap, useDraw } from '@/map'
import { toRaw, nextTick, isRef } from 'vue'
import type { Type as DrawType } from 'ol/geom/Geometry'
import { ref, watch } from 'vue'
import type { Ref } from 'vue'
import { Map } from 'ol'
import { SimpleGeometry } from 'ol/geom'

const map = getMap()?.map


nextTick(() => {
    console.log(toRaw(map.value), "nextTick");
})


const drawtype = ref<'None' | DrawType>('None')
const drawtypelist = ref<{
    label: string, value: 'None' | DrawType
}[]>([
    { label: '无', value: 'None' },
    { label: '点', value: 'Point' },
    { label: '线', value: 'LineString' },
    { label: '圆', value: 'Circle' },
    { label: '面', value: 'Polygon' }
])

const { end, start, clear, show, hide } = useDraw({
    name: 'test_draw',
    map: map as Ref<Map>,
    drawType: drawtype,
    drawend(event, drawLayer) {
        const geometry = event.feature.getGeometry() as SimpleGeometry
        const coordinates = geometry.getCoordinates()
        event.feature.setProperties({ name: '456' })
        console.log('绘制', { event, drawLayer, geometry }, coordinates);
    }
})

watch(drawtype, () => {
    if (drawtype.value === 'None') {
        end()
    } else {
        start()
    }
})

</script>
<template>
    <div class="control-list">
        <n-space class="btn-groups" align="center" justify="center">
            <n-button type="primary" @click="clear">
                清空
            </n-button>
            <n-button type="primary" @click="show">
                显示图层
            </n-button>
            <n-button type="primary" @click="hide">
                隐藏图层
            </n-button>
        </n-space>
        <div class="select-label">
            <label for="drawtype">绘制类型：</label>
            <n-select id="drawtype" v-model:value="drawtype" filterable placeholder="选择绘制类型" :options="drawtypelist" />
        </div>
    </div>
</template>
<style scoped>
.control-list {
    position: absolute;
    top: 20px;
    right: 50px;
    width: 270px;
    background-color: rgba(138, 238, 238, 0.336);
    border-radius: 5px;
}

.btn-groups {
    margin: 10px 0;
}

.select-label {
    display: flex;
    justify-content: center;
}

.select-label>label {
    width: 120px;
    line-height: 34px;
}
</style>